<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .clock {
            width: 600px;
            height: 600px;
            margin: 100px auto;
            background: url(images/clock.jpg) no-repeat;
            position: relative;
        }

        .clock div {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url(images/hour.png) no-repeat center center;
        }

        #m {
            background-image: url(images/minute.png);
        }

        #s {
            background-image: url(images/second.png);
            /*让盒子旋转*/
            /*旋转 度数*/
            /*transform: rotate(30deg);*/

        }
    </style>
</head>
<body>
<div class="clock">
    <div id="h"></div>
    <div id="m"></div>
    <div id="s"></div>
</div>


<script>
    //1 获取元素
    var h = document.getElementById("h");
    var m = document.getElementById("m");
    var s = document.getElementById("s");

    var timer =null;

   timer = setInterval(function(){
        var date =new Date();
        h.style.transform="rotate("+30* date.getHours()+"deg)";
        m.style.transform="rotate("+6* date.getMinutes()+"deg)";
        s.style.transform="rotate("+6* date.getSeconds()+"deg)";

    },20)



</script>
</body>
</html>